<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>无限轮播图</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background: linear-gradient(45deg, #667eea, #764ba2);
            font-family: 'Microsoft YaHei', sans-serif;
        }

        .carousel-container {
            width: 80%;
            max-width: 800px;
            position: relative;
            overflow: hidden;
            border-radius: 15px;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
        }

        .carousel {
            display: flex;
            transition: transform 0.5s ease-in-out;
        }

        .carousel-item {
            min-width: 100%;
            height: 400px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 3rem;
            color: white;
            font-weight: bold;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
        }

        /* 不同轮播项的颜色 */
        .item-1 { background: linear-gradient(135deg, #667eea, #764ba2); }
        .item-2 { background: linear-gradient(135deg, #f093fb, #f5576c); }
        .item-3 { background: linear-gradient(135deg, #4facfe, #00f2fe); }
        .item-4 { background: linear-gradient(135deg, #43e97b, #38f9d7); }
        .item-5 { background: linear-gradient(135deg, #fa709a, #fee140); }

        .carousel-controls {
            position: absolute;
            top: 50%;
            width: 100%;
            display: flex;
            justify-content: space-between;
            transform: translateY(-50%);
            padding: 0 20px;
        }

        .carousel-btn {
            background: rgba(255, 255, 255, 0.3);
            border: none;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            font-size: 1.5rem;
            color: white;
            cursor: pointer;
            transition: all 0.3s ease;
            backdrop-filter: blur(10px);
        }

        .carousel-btn:hover {
            background: rgba(255, 255, 255, 0.5);
            transform: scale(1.1);
        }

        .carousel-indicators {
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 10px;
        }

        .indicator {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.5);
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .indicator.active {
            background: white;
            transform: scale(1.2);
        }

        .carousel-title {
            position: absolute;
            top: 20px;
            left: 50%;
            transform: translateX(-50%);
            color: white;
            font-size: 1.5rem;
            text-align: center;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
        }

        @media (max-width: 768px) {
            .carousel-container {
                width: 95%;
            }
            
            .carousel-item {
                height: 300px;
                font-size: 2rem;
            }
            
            .carousel-btn {
                width: 40px;
                height: 40px;
                font-size: 1.2rem;
            }
        }
    </style>
</head>
<body>
    <div class="carousel-container">
        <div class="carousel-title">无限轮播图演示</div>
        <div class="carousel" id="carousel">
            <div class="carousel-item item-1">轮播项 1</div>
            <div class="carousel-item item-2">轮播项 2</div>
            <div class="carousel-item item-3">轮播项 3</div>
            <div class="carousel-item item-4">轮播项 4</div>
            <div class="carousel-item item-5">轮播项 5</div>
        </div>
        
        <div class="carousel-controls">
            <button class="carousel-btn" id="prevBtn">‹</button>
            <button class="carousel-btn" id="nextBtn">›</button>
        </div>
        
        <div class="carousel-indicators" id="indicators">
            <!-- 指示点将通过JavaScript动态生成 -->
        </div>
    </div>

        <script>
        class InfiniteCarousel {
            constructor(containerId) {
                this.carousel = document.getElementById(containerId);
                if (!this.carousel) {
                    console.error('轮播图容器未找到:', containerId);
                    return;
                }
                
                this.items = this.carousel.querySelectorAll('.carousel-item');
                this.currentIndex = 0;
                this.isTransitioning = false;
                this.autoPlayInterval = null;
                this.originalItemCount = this.items.length;
                
                this.init();
            }
            
            init() {
                if (this.items.length === 0) {
                    console.error('未找到轮播项目');
                    return;
                }
                
                // 克隆第一个和最后一个项目以实现无限循环
                this.cloneItems();
                
                // 设置当前索引为第一个原始项目的位置（索引1）
                this.currentIndex = 1;
                
                // 创建指示点
                this.createIndicators();
                
                // 设置初始位置
                this.goToSlide(this.currentIndex, false);
                
                // 添加事件监听器
                this.addEventListeners();
                
                // 开始自动播放
                this.startAutoPlay();
            }
            
            cloneItems() {
                const firstClone = this.items[0].cloneNode(true);
                const lastClone = this.items[this.originalItemCount - 1].cloneNode(true);
                
                this.carousel.appendChild(firstClone);
                this.carousel.insertBefore(lastClone, this.items[0]);
                
                // 更新items引用
                this.items = this.carousel.querySelectorAll('.carousel-item');
            }
            
            createIndicators() {
                const indicatorsContainer = document.getElementById('indicators');
                if (!indicatorsContainer) {
                    console.error('指示点容器未找到');
                    return;
                }
                
                indicatorsContainer.innerHTML = ''; // 清空现有指示点
                
                for (let i = 0; i < this.originalItemCount; i++) {
                    const indicator = document.createElement('div');
                    indicator.className = 'indicator';
                    if (i === 0) {
                        indicator.classList.add('active');
                    }
                    indicator.addEventListener('click', () => {
                        this.goToSlide(i + 1); // +1 因为前面有克隆项目
                    });
                    indicatorsContainer.appendChild(indicator);
                }
            }
            
            addEventListeners() {
                // 上一张/下一张按钮
                const prevBtn = document.getElementById('prevBtn');
                const nextBtn = document.getElementById('nextBtn');
                
                if (prevBtn) {
                    prevBtn.addEventListener('click', () => {
                        this.prevSlide();
                    });
                }
                
                if (nextBtn) {
                    nextBtn.addEventListener('click', () => {
                        this.nextSlide();
                    });
                }
                
                // 鼠标悬停时暂停自动播放
                this.carousel.addEventListener('mouseenter', () => {
                    this.stopAutoPlay();
                });
                
                this.carousel.addEventListener('mouseleave', () => {
                    this.startAutoPlay();
                });
                
                // 触摸滑动支持
                let startX = 0;
                let endX = 0;
                
                this.carousel.addEventListener('touchstart', (e) => {
                    startX = e.touches[0].clientX;
                    this.stopAutoPlay();
                });
                
                this.carousel.addEventListener('touchmove', (e) => {
                    endX = e.touches[0].clientX;
                });
                
                this.carousel.addEventListener('touchend', () => {
                    const diff = startX - endX;
                    if (Math.abs(diff) > 50) {
                        if (diff > 0) {
                            this.nextSlide();
                        } else {
                            this.prevSlide();
                        }
                    }
                    this.startAutoPlay();
                });
                
                // 过渡结束事件处理
                this.carousel.addEventListener('transitionend', () => {
                    this.isTransitioning = false;
                    
                    // 检查是否到达克隆的项目，如果是则无缝跳转
                    const totalItems = this.items.length;
                    if (this.currentIndex === 0) {
                        // 跳转到真正的最后一个项目
                        this.carousel.style.transition = 'none';
                        this.currentIndex = totalItems - 2;
                        this.goToSlide(this.currentIndex, false);
                    } else if (this.currentIndex === totalItems - 1) {
                        // 跳转到真正的第一个项目
                        this.carousel.style.transition = 'none';
                        this.currentIndex = 1;
                        this.goToSlide(this.currentIndex, false);
                    }
                    
                    this.updateIndicators();
                });
            }
            
            goToSlide(index, withTransition = true) {
                if (this.isTransitioning) return;
                
                this.isTransitioning = true;
                this.currentIndex = index;
                const translateX = -this.currentIndex * 100;
                
                if (!withTransition) {
                    this.carousel.style.transition = 'none';
                } else {
                    this.carousel.style.transition = 'transform 0.5s ease-in-out';
                }
                
                this.carousel.style.transform = `translateX(${translateX}%)`;
                
                // 如果没有过渡，立即重置状态
                if (!withTransition) {
                    setTimeout(() => {
                        this.isTransitioning = false;
                        this.carousel.style.transition = 'transform 0.5s ease-in-out';
                    }, 50);
                }
            }
            
            nextSlide() {
                if (this.isTransitioning) return;
                this.goToSlide(this.currentIndex + 1);
            }
            
            prevSlide() {
                if (this.isTransitioning) return;
                this.goToSlide(this.currentIndex - 1);
            }
            
            updateIndicators() {
                const indicators = document.querySelectorAll('.indicator');
                const originalIndex = this.getOriginalIndex();
                
                indicators.forEach((indicator, index) => {
                    indicator.classList.toggle('active', index === originalIndex);
                });
            }
            
            getOriginalIndex() {
                const totalItems = this.items.length;
                let originalIndex = this.currentIndex - 1;
                
                if (this.currentIndex === 0) {
                    originalIndex = totalItems - 3;
                } else if (this.currentIndex === totalItems - 1) {
                    originalIndex = 0;
                }
                
                return originalIndex;
            }
            
            startAutoPlay() {
                this.stopAutoPlay();
                this.autoPlayInterval = setInterval(() => {
                    this.nextSlide();
                }, 3000);
            }
            
            stopAutoPlay() {
                if (this.autoPlayInterval) {
                    clearInterval(this.autoPlayInterval);
                    this.autoPlayInterval = null;
                }
            }
        }
        
        // 初始化轮播图
        document.addEventListener('DOMContentLoaded', () => {
            new InfiniteCarousel('carousel');
        });
    </script>
</body>
</html>
